<template>
  <div class="flex flex-col min-h-screen">
    <Header></Header>

    <!-- 主内容区域 -->
    <!--  <main class="container max-w-screen-xl mx-auto px-4 md:px-6 py-4">-->
    <main class="flex-grow w-full mx-auto px-6 py-4">
      <!-- grid 表格布局，分为 12 列 -->
      <div class="grid grid-cols-12 gap-7">
        <!-- 左边栏 -->
        <div class="col-span-12 md:col-span-8 lg:col-span-9 mb-3">

          <!-- grid 表格布局，分为 12 列 -->
          <div class="grid grid-cols-12 gap-7">
            <div v-if="wikis && wikis.length > 0" v-for="(wiki, index) in wikis" :key="index" class="col-span-12 md:col-span-6 lg:col-span-6 animate__animated animate__fadeInUp">
              <div
                  class="relative bg-white h-full border border-gray-200 rounded-lg hover:scale-[1.03] dark:bg-gray-800 dark:border-gray-700 hover:scale-[1.03] transition-all duration-300 hover:shadow-xl hover:shadow-sky-500/50">
                <!-- 知识库封面 -->
                <a class="cursor-pointer" @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)">
<!--                  <img class="rounded-t-lg h-36 w-full"
                       :src="wiki.cover"/>-->
                </a>
                <div class="p-5">
                  <!-- 知识库标题 -->
                  <a class="cursor-pointer" @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)">
                    <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        <span
                                            class="hover:border-gray-600 hover:border-b-2 dark:hover:border-gray-400">{{
                                            wiki.title
                                          }}</span>
                    </h2>
                  </a>
                  <!-- 知识库摘要 -->
                  <p class="font-normal text-gray-500 dark:text-gray-400">
                    {{ wiki.summary }}
                  </p>
                  <div class="flex items-center text-gray-500 text-sm">
                    <svg t="1705985882454" class="icon inline-block w-4 h-4 mr-1 mt-5 mb-5" viewBox="0 0 1024 1024"
                         version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7701" width="200" height="200">
                      <path
                          d="M200.405333 912.938667a90.965333 90.965333 0 0 1-89.6-93.866667v-614.4a93.866667 93.866667 0 0 1 89.6-93.866667h473.6a91.050667 91.050667 0 0 1 89.6 93.866667v183.466667a33.621333 33.621333 0 0 1-34.133333 34.133333 31.402667 31.402667 0 0 1-34.133333-34.133333v-183.466667a28.586667 28.586667 0 0 0-25.6-29.866667h-473.6c-17.066667 0-25.6 12.8-25.6 29.866667v614.4a28.373333 28.373333 0 0 0 25.6 29.866667h256a33.493333 33.493333 0 0 1 34.133333 34.133333 26.794667 26.794667 0 0 1-29.866667 29.866667z m354.133334-4.266667a47.872 47.872 0 0 1-34.133334-12.8 41.130667 41.130667 0 0 1-12.8-42.666667l12.8-102.4 234.666667-234.666666a51.584 51.584 0 0 1 68.266667 0l76.8 76.8a51.584 51.584 0 0 1 0 68.266666l-234.666667 234.666667-102.4 12.8z m29.866666-128l-8.533333 64 64-8.533333 209.066667-209.066667-55.466667-55.466667z m-341.333333-68.266667a33.664 33.664 0 0 1-34.133333-34.133333 31.36 31.36 0 0 1 34.133333-34.133333h187.733333a34.133333 34.133333 0 0 1 0 68.266666z m0-179.2a33.749333 33.749333 0 0 1-34.133333-34.133333 31.488 31.488 0 0 1 34.133333-34.133333h264.533333a34.133333 34.133333 0 0 1 0 68.266666z m0-179.2a33.536 33.536 0 0 1-34.133333-34.133333 31.488 31.488 0 0 1 34.133333-34.133333h384a34.133333 34.133333 0 1 1 0 68.266666z"
                          p-id="7702" fill="#707070"></path>
                    </svg>
                    创建于 {{ wiki.createTime }}
                  </div>
                </div>

                <!-- 是否置顶 -->
                <div v-if="wiki.isTop"
                     class="absolute inline-flex items-center justify-center w-14 h-7 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">
                  置顶
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <nav aria-label="Page navigation example" class="mt-10 flex justify-center" v-if="pages > 1">
            <ul class="flex items-center -space-x-px h-10 text-base">
              <!-- 上一页 -->
              <li>
                <a @click="getPageWikiList(current - 1)"
                   class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                   :class="[current > 1 ? '' : 'cursor-not-allowed']"
                >

                  <span class="sr-only">上一页</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                       viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="M5 1 1 5l4 4"/>
                  </svg>
                </a>
              </li>
              <!-- 页码 -->
              <li v-for="(pageNo, index) in pages" :key="index">
                <a @click="getPageWikiList(pageNo)"
                   class="flex items-center justify-center px-4 h-10 leading-tight border  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                   :class="[pageNo == current ? 'text-sky-600  bg-sky-50 border-sky-500 hover:bg-sky-100 hover:text-sky-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700']"
                >
                  {{ index + 1 }}
                </a>
              </li>
              <!-- 下一页 -->
              <li>
                <a @click="getPageWikiList(current + 1)"
                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                   :class="[current < pages ? '' : 'cursor-not-allowed']"
                >
                  <span class="sr-only">下一页</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                       viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                          stroke-width="2" d="m1 9 4-4-4-4"/>
                  </svg>
                </a>
              </li>

            </ul>
          </nav>

        </div>

        <!-- 右边侧边栏 -->
        <aside class="col-span-12 md:col-span-4 lg:col-span-3">
          <div class="sticky top-[5rem]">
            <!-- 博主信息 -->
            <UserInfoCard></UserInfoCard>

            <!-- 分类 -->
            <CategoryListCard></CategoryListCard>

            <!-- 标签 -->
            <TagListCard></TagListCard>

            <!--公告-->
            <NotifyListCard></NotifyListCard>
          </div>
        </aside>
      </div>
    </main>

    <!-- 返回顶部 -->
    <ScrollToTopButton></ScrollToTopButton>

    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import ScrollToTopButton from '@/layouts/frontend/components/ScrollToTopButton.vue'
import {getWikiList} from '@/api/frontend/wiki'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import NotifyListCard from '@/layouts/frontend/components/NotifyListCard.vue'

const router = useRouter()
// 知识库
const wikis = ref([])
// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(10)
// 总文章数
const total = ref(0)
// 总共多少页
const pages = ref(0)

// 跳转文章详情页
const goWikiArticleDetailPage = (wikiId, articleId) => {
  router.push({path: '/wiki/' + wikiId, query: {articleId}})
}

/*getWikiList().then(res => {
  if (res.success) {
    wikis.value = res.data
  }
})*/

function getPageWikiList(currentNo) {
  // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
  if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return
  // 调用分页接口渲染数据
  getWikiList({current: currentNo, size: size.value}).then((res) => {
    if (res.success) {
      wikis.value = res.data
      current.value = res.current
      size.value = res.size
      total.value = res.total
      pages.value = res.pages
    }
  })
}

getPageWikiList(current.value)
</script>

